<template>
	<view class="booking_content">
		<view v-if="userId != null && userId != ''">
			<view class="bookingWeekDate">
				<view style="display: flex;justify-content: space-around;color: grey;font-size: 12px;">
					<view>日</view>
					<view>一</view>
					<view>二</view>
					<view>三</view>
					<view>四</view>
					<view>五</view>
					<view>六</view>
				</view>
				<view style="display: flex;justify-content: space-around; margin-top: 2%;color: grey;font-size: 12px;">
					<view v-for="(item,index) in dateArr" :key="index" @click="bindWeekChange(index,item)"
						:class="(index==chekedDate.weekIndex&&chekedDate.weekIndex!=7)||(chekedDate.weekIndex==7&&index==0)?'bookingWeekDate_checked':'bookingWeekDate_unchecked'">
						{{item.date}}
					</view>
				</view>
			</view>
			<view class="bookingRecord">
				<view style="font-weight: bold;">当天预约记录</view>
				<view v-if="bookList == ''" class="bookingRecord_nothing">当前无预约记录</view>
				<view v-else>
					<scroll-view scroll-y="true" style="width: 100%; height: 100px;" lower-threshold="100">
						<view class="bookingRecord_line" v-for="item,index in bookList">
							<view><text
									style="color: #1884eb;">【{{item.broadroomName}}】</text>{{item.bookStart.slice(11, 16)}}~{{item.bookEnd.slice(11, 16)}}
							</view>
							<view>{{item.compName}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 预约信息 -->
			<view class="booking_info">
				<view>填写预约信息</view>
				<view class="booking_info_line">
					<view>预约会议室</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChangeAddress" :value="index" :range="addressList">
							<view style="padding-right: 20px;">
								<text v-if="index==''" class="booking_info_placeholer">请选择会议室地址</text>
								<text class="uni-input">{{addressList[index]}}</text>
								<span class="iconfont booking_info_icon">&#xe65c;</span>
							</view>
						</picker>
					</view>
				</view>

				<view class="booking_info_line">
					<view>预约会议室</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="indexName" :range-key="'broadroomName'"
							:range="broadroomList">
							<view style="padding-right: 20px;">
								<text v-if="indexName==''" class="booking_info_placeholer">请选择会议室</text>
								<text class="uni-input">{{broadroomList[indexName].broadroomName}}</text>
								<span class="iconfont booking_info_icon">&#xe65c;</span>
							</view>
						</picker>
					</view>
				</view>

				<view class="booking_info_line">
					<view>开始时间</view>
					<view>
						<picker mode="time" :value="startTime" start="09:30" end="18:30"
							@change="bindTimeChange($event,'startTime')">
							<view style="padding-right: 20px;">
								<text v-if="startTime==''" class="booking_info_placeholer">请选择开始时间</text>
								<text v-else>{{startTime}}</text>
								<span class="iconfont booking_info_icon">&#xe65c;</span>
							</view>
						</picker>
					</view>
				</view>

				<view class="booking_info_line">
					<view>结束时间</view>
					<view>
						<picker mode="time" :value="endTime" start="09:30" end="18:30"
							@change="bindTimeChange($event,'endTime')">
							<view style="padding-right: 20px;">
								<text v-if="endTime==''" class="booking_info_placeholer">请选择结束时间</text>
								<text v-else>{{endTime}}</text>
								<span class="iconfont booking_info_icon">&#xe65c;</span>
							</view>
						</picker>
					</view>
				</view>

				<view class="booking_info_line" style="border: none;">
					<view>预约公司</view>
					<view v-if="userInfo.deptName != undefined || userInfo.deptName != null" class="info_line_item">
						{{userInfo.deptName}}
					</view>
				</view>
			</view>
			<button type="default" v-if="DateCompare(nowDate,selectedDate)" :disabled="true"
				style="background-color: #999999;" @click="formSubmit">立即预约</button>
			<button type="default" v-else @click="formSubmit">立即预约</button>
		</view>
		<view class="authBody" v-else>
			<view class="authBody_item">
				<view class="qrCodeNoPermission"></view>
				<view class="qrbottom">
					<view class="qrbottom_prompt">暂无权限,请联系管理员审核!</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listBook,
		addBook
	} from '../../common/js/api/bookRecord.js';
	import {
		listBroadroom
	} from '../../common/js/api/broadroom.js';
	import {
		getStaffByOpenId
	} from '../../common/js/api/staff.js';
	import {
		listCompany
	} from '../../common/js/api/company.js';

	export default {
		data() {
			return {
				//开始时间
				startTime: '',
				//结束时间
				endTime: '',
				//一周日期数据
				dateArr: [],
				addressList: [],
				//选中日期
				chekedDate: {
					//选中为周几
					weekIndex: 1,
					//选中完整日期
					date: '',
					fullDate: '',
				},
				//选择的时间
				selectedDate: '',
				//系统时间
				nowDate: '',
				//会议室预约记录
				bookList: [],
				//会议室临时列表
				broadroomTmp: [],
				//所选会议室地址下标
				index: '',
				//所选会议室地址下标
				indexName: '',
				//登陆员工详细信息
				userInfo: [],
				//会议室列表
				broadroomList: [],
				//用户id
				userId: "",
				//企业列表
				compList: [],
			}
		},
		onLoad() {
			//var openId = uni.getStorageSync('openid')
			//获取用户基本信息
			this.userInfo = uni.getStorageSync('userInfo')
			this.userId = this.userInfo.sysUser.userId
			this.getWeekArr()
			this.selectedDate = this.dateArr[this.chekedDate.weekIndex].fullDate
			this.nowDate = new Date().toISOString().slice(0, 10)
			this.getBookList()
			this.getBroadroomList()
			this.getCompanyList()
		},
		methods: {
			//获取预定记录
			getBookList() {
				listBook().then(res => {
					let newList = res.rows
					for (let i in newList) {
						if (newList[i].bookStart != null && this.DateBiJiao(this.selectedDate, newList[i].bookStart
								.slice(0, 10)) &&
							newList[i].approverState == 1) {
							this.bookList.push(newList[i])
						}
					}
				})
			},
			//获取公司基本信息
			getCompanyList() {
				//检验是否为系统员工
				if (this.userInfo.sysUser.deptId != null && this.userInfo.sysUser.deptId != "") {
					this.userInfo.deptName = this.userInfo.sysDept.deptName
					console.log(this.userInfo)
				} else {
					//获取企业信息列表
					listCompany().then(res => {
						this.compList = res.rows
						//获取企业名称
						for (let i in this.compList) {
							if (this.compList[i].compId === this.userInfo.sysUser.compId) {
								this.userInfo.deptName = this.compList[i].compName
							}
						}
					})
				}
			},
			//获取会议室信息
			getBroadroomList() {
				//let that = this
				listBroadroom().then(res => {
					this.broadroomTmp = res.rows
					this.getAddressList()
				})
			},
			//获取会议室地点并去重
			getAddressList() {
				let newList = []
				for (let i in this.broadroomTmp) {
					newList.push(this.broadroomTmp[i].broadroomAddress)
				}
				this.addressList = [...new Set(newList)]
			},
			//获取选择的会议室地址
			bindPickerChangeAddress: function(e) {
				this.index = e.target.value
				let newList = this.broadroomTmp
				this.broadroomList = []
				for (let i in newList) {
					if (newList[i].broadroomAddress === this.addressList[this.index]) {
						this.broadroomList.push(newList[i])
					}
				}
			},
			//获取选择的会议室名称下标
			bindPickerChange: function(e) {
				this.indexName = e.target.value
				console.log(this.indexName);
			},
			//时间比较
			DateBiJiao(firstDate, lastDate) {
				let arr = firstDate.split("-");
				let firsttime = new Date(arr[0], arr[1], arr[2]);
				let firsttimes = firsttime.getTime();
				let arrs = lastDate.split("-");
				let lasttime = new Date(arrs[0], arrs[1], arrs[2]);
				let lasttimes = lasttime.getTime();
				if (firsttimes == lasttimes) {
					return true;
				} else
					return false;
			},
			DateCompare(firstDate, lastDate) {
				let arr = firstDate.split("-");
				let firsttime = new Date(arr[0], arr[1], arr[2]);
				let firsttimes = firsttime.getTime();
				let arrs = lastDate.split("-");
				let lasttime = new Date(arrs[0], arrs[1], arrs[2]);
				let lasttimes = lasttime.getTime();
				if (firsttimes > lasttimes) {
					return true;
				} else
					return false;
			},
			bindTimeChange(e, filed) {
				if (filed == 'startTime') {
					this.startTime = e.target.value
				} else {
					this.endTime = e.target.value
				}
			},
			//获取日期数据
			getWeek(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds);
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = tMonth + 1;
				tDate = tDate;
				let obj = {}
				obj.date = tDate
				if (tMonth.toString().length != 2) {
					tMonth = "0" + tMonth.toString()
				}
				if (tDate.toString().length != 2) {
					tDate = "0" + tDate.toString()
				}
				obj.fullDate = tYear + '-' + tMonth + '-' + tDate
				return obj;
			},
			//获取本周日历数据
			getWeekArr() {
				let date = new Date();
				let weekIndex = date.getDay();
				this.chekedDate.weekIndex = weekIndex
				let data = []
				for (let i = weekIndex - 1; i >= 0; i--) {
					data.push(this.getWeek(-i))
				}
				//当前日期之后的
				for (let i = 1; i <= 7 - weekIndex; i++) {
					if (i == 7 - weekIndex) {
						data.unshift(this.getWeek(i))
					} else {
						data.push(this.getWeek(i))
					}
				}
				this.dateArr = data
			},
			bindWeekChange(e, item) {
				this.chekedDate.weekIndex = e
				this.chekedDate.date = item.fullDate
				if (e == 0) {
					this.chekedDate.weekIndex == 7
				}
				this.selectedDate = this.dateArr[this.chekedDate.weekIndex].fullDate
				this.bookList = []
				this.getBookList()
			},
			formSubmit() {
				var that = this
				var data = {};
				if (that.broadroomList[that.indexName] == undefined || that.addressList[that.index] == undefined || that
					.startTime === '' || that.endTime === '') {
					uni.showModal({
						content: '请将信息填写完整',
						confirmColor: '#007AFF',
						showCancel: false
					})
				} else {
					data.broadroomId = that.broadroomList[that.indexName].broadroomId;
					data.broadroomName = that.broadroomList[that.indexName].broadroomName;
					if (that.userInfo.sysUser.deptId != null) {
						data.compId = that.userInfo.sysUser.deptId;
					} else {
						data.compId = that.userInfo.sysUser.compId;
					}
					data.compName = that.userInfo.deptName;
					data.userName = that.userInfo.sysUser.userName;
					console.log(that.userInfo.sysUser);
					data.phone = that.userInfo.sysUser.phoneNumber;
					data.broadroomAddress = that.broadroomList[that.indexName].broadroomAddress;
					data.bookStart = that.dateArr[that.chekedDate.weekIndex].fullDate + ' ' + that.startTime;
					data.bookEnd = that.dateArr[that.chekedDate.weekIndex].fullDate + ' ' + that.endTime;
					addBook(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							uni.redirectTo({
								url: '../bookingRecord/bookingRecord?name=' + '会议室预定记录'
							})
						} else {
							uni.showModal({
								content: '提交失败',
								showCancel: false
							})
						}
					})

				}
			}
		},
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style lang="scss" scoped>
	.booking_content {
		height: 100vh;
	}

	//button样式
	.booking_content button {
		width: 90%;
		color: white;
		background-color: #1884eb;
		margin-top: 5%;
	}

	//预约信息
	.booking_info {
		background-color: white;
		margin-top: 10px;
		font-weight: bold;
		padding: 20px;
	}

	// 单行预约信息
	.booking_info_line {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		line-height: 40px;
		border-bottom: 1px solid #eeeeee;
		position: relative;
	}

	//选择时间提示
	.booking_info_placeholer {
		font-weight: normal;
		color: grey;
	}

	//选择时间提示
	.booking_info_icon {
		color: grey;
		font-size: 18px;
		font-weight: normal;
		position: absolute;
		display: block;
		right: 0px;
		bottom: -0px;
	}

	//当天预约记录
	.bookingRecord {
		background-color: white;
		margin-top: 10px;
		padding: 20px;
	}

	.bookingRecord_nothing {
		padding-top: 15px;
		padding-left: 5px;
		color: grey;
		display: flex;
		justify-content: center;
		font-size: 12px;
	}

	.bookingRecord_line {
		padding-top: 15px;
		padding-left: 5px;
		color: grey;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}

	//本周日历
	.bookingWeekDate {
		background-color: white;
		line-height: 20px;
		padding: 10px;
	}

	.bookingWeekDate_checked {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		text-align: center;
		line-height: 26px;
		background-color: #1884eb;
		color: white;
	}

	.bookingWeekDate_unchecked {
		width: 26px;
		height: 26px;
		text-align: center;
		line-height: 26px;
	}

	.register-error-text {
		float: right;
		position: relative;
		top: -20px;
		color: red;
		right: 20px;
	}

	.qrCodeNoPermission {
		width: 80%;
		padding-bottom: 80%;
		margin: 0 auto;
		background-image: url(http://101.206.123.213:7051/static/image/common/noPermission.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.qrbottom {
		text-align: center;
		width: 90%;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 24rpx;
	}

	.qrbottom_prompt {
		font-weight: bold;
		font-size: 40rpx;
	}

	.authBody {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.authBody_item {
		width: 90%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
	}
</style>
